<template>
    <div class="box">
      <el-drawer
          title="撞库通过率配置"
          :visible.sync="dialogShow"
          :with-header="true"
          :size="device === 'mobile'?'80%':'35%'"
          >
          <div class="drawer_content" style="padding:0 20px 20px;">
            <el-form :model="form" :rules="rules" label-width="130px" ref="formRef">
              <el-form-item
                 label="接收产品"
                 prop="productId"
               >
                 <el-select
                   v-model="form.productId"
                   clearable
                   filterable
                   placeholder="请选择"
                   style="width: 100%"
                 >
                   <el-option
                     v-for="(item, index) in productIdOption"
                     :key="index"
                     :label="item.productName"
                     :value="item.id"
                   ></el-option>
                 </el-select>
               </el-form-item>
                <el-form-item
                 label="掩码分发渠道"
                 prop="maskChannelId"
               >
                 <el-select
                   v-model="form.maskChannelId"
                   clearable
                   filterable
                   placeholder="请选择"
                   style="width: 100%"
                 >
                   <el-option
                     v-for="(item, index) in maskChannelIdOption"
                     :key="index"
                     :label="item.productName"
                     :value="item.id"
                   ></el-option>
                 </el-select>
               </el-form-item>
               <el-form-item
                 label="Md5分发渠道"
                 prop="md5ChannelId"
               >
                 <el-select
                   v-model="form.md5ChannelId"
                   clearable
                   filterable
                   placeholder="请选择"
                   style="width: 100%"
                 >
                   <el-option
                     v-for="(item, index) in md5ChannelIdOption"
                     :key="index"
                     :label="item.productName"
                     :value="item.id"
                   ></el-option>
                 </el-select>
               </el-form-item>
              <el-form-item label="撞库通过率（%)" prop="passRatio">
                <el-input-number 
                  v-model="form.passRatio" 
                  controls-position="right" 
                  placeholder="请输入"
                  :min="0" 
                  :precision="2"
                  style="width: 100%;"
                >
                </el-input-number>
              </el-form-item>
               <el-form-item
                 label="时间类型"
                 prop="isZone"
               >
                 <el-select
                   v-model="form.isZone"
                   clearable
                   filterable
                   placeholder="请选择"
                   style="width: 100%"
                 >
                   <el-option
                     v-for="(item, index) in isZoneOption"
                     :key="index"
                     :label="item.label"
                     :value="item.value"
                   ></el-option>
                 </el-select>
              </el-form-item>
               <el-form-item label="时间范围" prop="dateRange">
                <div style="display: flex;width: 100%;">
                  <el-form-item prop="startTime" style="width: 50%">
                    <el-time-picker
                     format="HH:mm"
                     v-model="form.startTime"
                     placeholder="请选择开始时间"
                     style="width: 100%"
                    >
                    </el-time-picker>
                  </el-form-item>
                  <el-form-item prop="endTime" style="width: 50%">
                    <el-time-picker
                     format="HH:mm"
                     v-model="form.endTime"
                     placeholder="请选择结束时间"
                     style="width: 100%"
                    >
                    </el-time-picker>
                  </el-form-item>
                </div>
              </el-form-item>
            </el-form>
            <div class="drawer_footer" style="text-align: center;">
                <el-button type="primary" @click="handleSubmit('formRef')"
                  >保存</el-button
                >
                <el-button @click="handleClose">取 消</el-button>
            </div>
          </div>
        </el-drawer>
    </div>
  </template>
  
  <script>
  import { mapGetters } from "vuex";
  import {
    addOrEditPassRatio,
    queryPassRatioProductList,
  } from '@/api/business/channelManagement'
  import {
    getDownProductList
  } from '@/api/business/productManagement'
  import moment from "moment";
  export default {
    name: 'isPassRatioEdit',
    data() {
      return {
        // 机构配置抽屉显示状态
        dialogShow: false,
        // 机构配置的表单信息
        form: {
  
        },
        // 机构配置表单校验规则
        rules: {
          isZone: [
            { required: true, message: '请选择时间类型', trigger: 'change' }
          ],
          startTime: [
            { required: true, message: '请选择开始时间', trigger: 'change' }
          ],
          endTime: [
            { required: true, message: '请选择结束时间', trigger: 'change' }
          ],
          maskChannelId:[
            { required: true, message: '请选择掩码分发渠道', trigger: 'change' }
          ],
          md5ChannelId:[
            { required: true, message: '请选择Md5分发渠道', trigger: 'change' }
          ],
          productId:[
            { required: true, message: '请选择接收产品', trigger: 'change' }
          ],
          passRatio:[
            { required: true, message: '请填写撞库通过率', trigger: 'change' }
          ],

          
        },
        // 时间类型筛选项
        isZoneOption:[
          { label: "白天", value: 0 },
          { label: "夜间", value: 1 },
        ],
        // 掩码分发渠道筛选项
        maskChannelIdOption:[
        ],
        // Md5分发渠道筛选项
        md5ChannelIdOption:[
        ],
        // 接收产品筛选项
        productIdOption:[

        ]
      
      }
        
    },
    computed:{
      ...mapGetters(["sidebar", "device"]),
    },
    created() { 
      // 获取分发渠道集合
      this.getPassRatioProductList()
    },
    methods: {
      // 获取分发渠道集合
      getPassRatioProductList(){
        // Md5分发渠道筛选项
        queryPassRatioProductList({sendType:0}).then(res=>{
          this.md5ChannelIdOption = res.data
        })
        // 掩码分发渠道筛选项
        queryPassRatioProductList({sendType:1}).then(res=>{
          this.maskChannelIdOption = res.data
        })
        // 接收产品筛选项
        getDownProductList().then(res=>{
          this.productIdOption = res.data
        })
      },
      // 打开抽屉
      openDrawer(data){
          this.dialogShow = true
          // 设置表单数据
          this.$set(this,'form',data)
          // 时间范围映射处理
          if(data.startTime && data.endTime){
             const startTime = new Date();
             const endTime = new Date();
             startTime.setHours(...data.startTime.split(':').map(Number));
             endTime.setHours(...data.endTime.split(':').map(Number));
             // 设置 开始事件和结算时间
             this.$set(this.form, 'startTime', startTime);
             this.$set(this.form, 'endTime', endTime);
          }
          // 清除校验状态
          this.$refs["formRef"].resetFields();
      },
      /*提交操作*/
      handleSubmit(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              let params = {};
              params = JSON.parse(JSON.stringify(this.form));
              // 时间范围处理
              params.startTime = moment(this?.form?.startTime).format("HH:mm");
              params.endTime = moment(this?.form?.endTime).format("HH:mm");
              // console.log(params);
              // 回传设置操作
              addOrEditPassRatio(params).then((res) => {
                   if (res.code === 200) {
                     this.$message.success("操作成功");
                     // 刷新操作
                     this.handleRefresh();
                   }
                 });
            }
          });
      },
      // 设置刷新页面
      handleRefresh() {
        this.$emit('refreshStarHaul')
        // 关闭抽屉
        this.handleClose();
      },
      /*关闭抽屉*/
      handleClose() {
         this.$refs["formRef"].resetFields();
         this.form = this.$options.data().form;
         this.dialogShow = false;
       },
   
    },
  
  };
  </script>
  
  <style scoped lang='scss'>
  .box{
  
  }
  </style>